Firefox Add-on SDK（Toolbar Button）

介紹

官方文件

請先看基本 Add-on 製作方法

此篇教學會用到 action btn 或 toggle btn 這兩個模組

這兩個模組是分類如下，這兩種其實用法和功能都一樣

基本上就是在 Firefox 上面建立按鈕，使用者按下去之後可以做不同的反應

1
2
Low-Level APIs > ui/button/action
Low-Level APIs > ui/button/toggle

先建立一個資料夾叫做 data ，將以下的圖存到 data 裡面

16
32
64

接著打開 index.js 填入以下程式碼

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// buttons 使用模組路徑為 ui/button/action
var buttons = require('sdk/ui/button/action'); 

// tabs 使用模組路徑為 ui/tabs 
var tabs    = require("sdk/tabs");

var button = buttons.ActionButton({
  id: "mozilla-link",
  label: "Visit Mozilla",
  icon: {
    "16": "./icon-16.png",
    "32": "./icon-32.png",
    "64": "./icon-64.png"
  },
  onClick: handleClick
});

function handleClick(state) {
  tabs.open("https://www.mozilla.org/");
}

ActionButton 說明文件

當按下此按鈕時會呼叫 handleClick 方法，handleClick 中使用 tabs 物件打開新的 mozilla 頁面

現在你安裝之後，右上角就會出現一個 Firefox 按鈕

如果你要使用 Attaching a panel 使用 toggle button

如果你要更複雜的介面可以使用 toolbar